<template>
	<view class="base-page" :style="{
    marginTop: '0px',
    paddingTop: (titleNavHeight + statusBarHeight) + 'px',
    background: backgroundColor
  }">
		<!-- 标题栏 -->
		<view class="page-title" v-show="types" :style="{ height: titleNavHeight + 'px', top: statusBarHeight + 'px' }">
			<view class="title">
				<u-icon class="icon" name="arrow-left" size="42" @click="goBack" />
				<text class="text">{{ title }}</text>
				<view class="" v-if="subTitle">
					<view class="" style="color:#027bd5;width: 100%;" @click="subClick">
						{{subTitle}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
			<!-- 页面内容 -->
			<slot />
		</view>
	</view>
</template>

<script>
	import {
		getBoundingClientRect
	} from "@/utils";

	const {
		windowWidth,
		statusBarHeight
	} = uni.getSystemInfoSync();

	const rect = getBoundingClientRect(windowWidth, statusBarHeight);

	export default {
		name: 'basePage',
		props: {
			title: {
				type: String,
				default: ''
			},
			subTitle: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#F6F7F9'
			},
			types: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			goBack() {
				this.$emit('back');
			},
			subClick(){
				this.$emit('subClick');
			}
		},
		computed: {
			windowWidth() {
				return windowWidth;
			},
			statusBarHeight() {
				return statusBarHeight;
			},
			titleNavHeight() {
				return (rect.top - statusBarHeight + 10) * 2 + rect.height;
			}
		}
	}
</script>

<style scoped>
	.base-page {
		/*height: calc(100vh - 44px);*/
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}

	.page-title {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9999;
	}
</style>

<style lang="less" scoped>
	.title {
		height: 100%;
		width: 100%;
		border-bottom: 1px solid #ebedf0;
		background-color: #ffffff;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 20rpx;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.text {
			width: calc(100vw - 100px);
			color: #323233;
			font-weight: 500;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			justify-items: center;
		}
	}
</style>